<template>
	<view>
		<u-navbar title-color="#fff" title-bold title-size="36" title="充值中心" :border-bottom="false"
			back-icon-color="#fff"
			:background="{backgroundColor:current==0?'#3E5797':current==1?'#1995A7':current==2?'#6351B4':current==3?'#383838':''}"></u-navbar>
		<view class="uni-margin-wrap u-p-l-76 "
			:class="current==0?'bg1':current==1?'bg2':current==2?'bg3':current==3?'bg4':''">
			<swiper @change="swchange" class="swiper" circular indicator-dots indicator-active-color="#666666"
				indicator-color="#D1D1D1" :current="current">
				<swiper-item v-for="(item,index) in 4" :key="index">
					<view class="swiper-item" :class="'swiper-item'+(index+1)">
						<view class="hy-div">
							<view class="cz-t" :class="'cz-t'+(index+1)">
								<span v-if="index==0">线索包充值</span>
								<span v-if="index==1">AI助手充值</span>
								<span v-if="index==2">AI形象克隆充值</span>
								<span v-if="index==3">尊享会员开通</span>
							</view>
							<view class="cz-jj u-m-t-4" :class="'cz-jj'+(index+1)">
								<span v-if="index==0">当前可抢案源（次）</span>
								<span v-if="index==1 || index==2 || (index==3 && lsdetail.level_id>0)">当前到期时间</span>
								<span v-if="index==3 && lsdetail.level_id==0">开通后可享受会员权益</span>
							</view>
							<view class="cz-num u-m-t-10" :class="'cz-num'+(index+1)" v-if='index==0'>
								{{lsdetail.clues_num}}
							</view>
							<view class="cz-num_-1 u-m-t-10" :class="'cz-num'+(index+1)" v-else>
								<span v-if='index==1'>{{lsdetail.ai_time?lsdetail.ai_time:'--'}}</span>
								<span v-if='index==3'>{{lsdetail.level_time?lsdetail.level_time:'--'}}</span>
							</view>

							<image class="cz-img" :src="'../../../static/img/lawyerVersion/cz-'+(index+1)+'.png'"
								mode=""></image>
							<view class="cz-btn" :class="'cz-btn'+(index+1)" @click="jilu">
								充值记录 >
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="">

			<view class="" v-if="current==0">
				<view class="font_weight font_16_333 u-m-l-32 u-m-t-60">
					线索包套餐
				</view>
				<scroll-view scroll-x="true">
					<view class="m-div flex">
						<view class="m-item " :class="cIndex==index2?'m-item-sel m-item-sel1':''"
							@click="xsbChange(item2,index2)" v-for="(item2,index2) in zybdatalist" :key="index2">
							<view class="m-title">
								{{item2.name}}
							</view>
							<view class="u-m-t-20">
								<span class="m-fh">¥</span>
								<span class="m-num">{{item2.price}}</span>
							</view>
							<view class="m-hx u-m-t-12">
								原价 ¥{{item2.org_price}}
							</view>
							<view class="gouxuan" v-if="cIndex==index2">
								<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex u-m-l-32 u-m-t-24">
					<view class="l-sx l-sx1"></view>
					<view class="font_weight font_16_333">
						线索包优势
						<span class="font_12_666 u-m-l-16 font_weight_normal">更省更划算</span>
					</view>
				</view>
				<view class="cz4-div cz4-div1">
					<view class="cz4-div-text">
						线索包案源价格更低，优惠价抢案更随心 </br>
						适用群体: 适合案源需求量大，追求案源性价比的律师
					</view>
					<view class="u-m-t-24 flex flex_sb u-p-l-24 u-p-r-24">
						<view class="cz4-item">
							<image class="cz4-img" src="../../../static/img/lawyerVersion/casa1.png" mode=""></image>
							<view class="font_12_333 u-m-t-16">性价比高</view>
						</view>
						<view class="cz4-item">
							<image class="cz4-img" src="../../../static/img/lawyerVersion/casa2.png" mode=""></image>
							<view class="font_12_333 u-m-t-16">单价低</view>
						</view>
						<view class="cz4-item">
							<image class="cz4-img" src="../../../static/img/lawyerVersion/casa3.png" mode=""></image>
							<view class="font_12_333 u-m-t-16">按月续费</view>
						</view>

					</view>
				</view>
				<view class="flex u-m-l-32 u-m-t-24">
					<view class="l-sx l-sx1"></view>
					<view class="font_weight font_16_333">
						可抢数量
					</view>
				</view>
				<view class="cz4-div cz4-div1 flex flex_sb font_12_333" v-if="xsblist">
					<view class="">
						<view class="">
							共享线索： <span class="font_weight font_20_333">{{xsblist.share_clues}}</span> 条
						</view>
						<view class="u-m-t-20">
							独享线索： <span class="font_weight font_20_333">{{xsblist.exc_clues}}</span> 条
						</view>
					</view>
					<view class="u-m-r-80">
						总数： <span class="font_weight font_20_333">{{xsblist.share_clues + xsblist.exc_clues}}</span> 条
					</view>
				</view>
				<view class="flex u-m-l-32 u-m-t-24">
					<view class="l-sx l-sx1"></view>
					<view class="font_weight font_16_333">
						案源单价
					</view>
				</view>
				<view class="cz4-div cz4-div1 flex flex_sb font_12_333" v-if="xsblist">
					<view class="">
						<view class="">
							优惠价格： <span class="font_weight font_20_333">{{xsblist.prefer_price}}</span> 元
						</view>
						<view class="u-m-t-20">
							可抢数量： <span class="font_weight font_20_333">{{xsblist.case_num}}</span> 条
						</view>
					</view>
					<view class="u-m-r-80">
						<span class="font_weight font_20_333">{{xsblist.case_price}}</span> 元/条
					</view>
				</view>
			</view>
			<view class="" v-if="current==1">
				<view class="font_weight font_16_333 u-m-l-32 u-m-t-60">
					AI助手套餐
				</view>
				<scroll-view scroll-x="true">
					<view class="m-div flex">
						<view class="m-item " :class="cIndex==index2?'m-item-sel m-item-sel2':''"
							@click="cIndex=index2,price=item2.price,id=item2.id,aicontent=item2.content"
							v-for="(item2,index2) in ailist" :key="index2">
							<view class="m-title">
								{{item2.name}}
							</view>
							<view class="u-m-t-20">
								<span class="m-fh">¥</span>
								<span class="m-num">{{item2.price}}</span>
							</view>
							<view class="m-hx u-m-t-12">
								原价 ¥{{item2.org_price}}
							</view>
							<view class="gouxuan" v-if="cIndex==index2">
								<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="cz4-div cz4-div2 flex">
					<view class="song-text">
						送
					</view>
					<view class="u-m-l-20 font_weight">
						限时特惠
					</view>
					<view class="u-m-l-20 sa3-col">
						认证通过免费试用1个月AI助手
					</view>
				</view>
				<view class="flex u-m-l-32 u-m-t-24">
					<view class="l-sx l-sx2"></view>
					<view class="font_weight font_16_333">
						AI助手优势
					</view>
				</view>
				<view class="cz4-div cz4-div2 cz4-div-text">
					{{aicontent}}
				</view>
			</view>
			<view class="" v-if="current==2">
				<view class="font_weight font_16_333 u-m-l-32 u-m-t-60">
					AI形象克隆套餐
				</view>
				<scroll-view scroll-x="true">
					<view class="m-div flex">
						<view class="m-item " :class="cIndex==index2?'m-item-sel m-item-sel3':''" @click="cIndex=index2"
							v-for="(item2,index2) in 4" :key="index2">
							<view class="m-title">
								套餐一
							</view>
							<view class="u-m-t-20">
								<span class="m-fh">¥</span>
								<span class="m-num">199</span>
							</view>
							<view class="m-hx u-m-t-12">
								原价 ¥299
							</view>
							<view class="gouxuan" v-if="cIndex==index2">
								<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex u-m-l-32 u-m-t-24">
					<view class="l-sx l-sx2"></view>
					<view class="font_weight font_16_333">
						AI形象克隆优势
					</view>
				</view>
				<view class="cz4-div cz4-div3 cz4-div-text">
					优势优势优势优势优势
				</view>
			</view>
			<view class="" v-if="current==3">
				<view class="font_weight font_16_333 u-m-l-32 u-m-t-60">
					尊享会员套餐
				</view>
				<scroll-view scroll-x="true">
					<view class="m-div flex">
						<view class="m-item " :class="cIndex==index2?'m-item-sel m-item-sel4':''"
							@click="selc(item2,index2)" v-for="(item2,index2) in datalist" :key="index2">
							<view class="m-title">
								{{item2.name}}
							</view>
							<view class="u-m-t-20">
								<span class="m-fh">¥</span>
								<span class="m-num">{{item2.price}}</span>
							</view>
							<view class="m-hx u-m-t-12">
								原价 ¥{{item2.org_price}}
							</view>
							<view class="gouxuan" v-if="cIndex==index2">
								<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex u-m-l-32 u-m-t-24">
					<view class="l-sx l-sx4"></view>
					<view class="font_weight font_16_333">
						四大重磅优势
					</view>
				</view>
				<view class="cz4-div flex flex_sb">
					<view class="cz4-item">
						<image class="cz4-img" src="../../../static/img/lawyerVersion/czq1.png" mode=""></image>
						<view class="font_12_333 u-m-t-16">排名靠前</view>
					</view>
					<view class="cz4-item">
						<image class="cz4-img" src="../../../static/img/lawyerVersion/czq2.png" mode=""></image>
						<view class="font_12_333 u-m-t-16">广告位特权</view>
					</view>
					<view class="cz4-item">
						<image class="cz4-img" src="../../../static/img/lawyerVersion/czq3.png" mode=""></image>
						<view class="font_12_333 u-m-t-16">个人主页</view>
					</view>
					<view class="cz4-item">
						<image class="cz4-img" src="../../../static/img/lawyerVersion/czq4.png" mode=""></image>
						<view class="font_12_333 u-m-t-16">个性化服务</view>
					</view>
				</view>
				<view class="flex u-m-l-32 u-m-t-24">
					<view class="l-sx l-sx4"></view>
					<view class="font_weight font_16_333">
						尊享会员优势
					</view>
				</view>
				<view class="cz4-div cz4-div-text">
					优势优势优势优势优势优势优势势
				</view>
				<view class="flex u-m-l-32 u-m-t-24">
					<view class="l-sx l-sx4"></view>
					<view class="font_weight font_16_333">
						尊享会员权益
					</view>
				</view>
				<view class="hyqx">
					<view class="">
						<scroll-view scroll-x="true">
							<u-table>
								<u-tr>
									<u-th style="">权益汇总</u-th>
									<u-th v-for="(item,index) in datalist" :key="index"
										:class="cIndex==index?'thsel':''">{{item.name}}</u-th>
									<!-- <u-th :class="cIndex==1?'thsel':''">白金</u-th>
									<u-th :class="cIndex==2?'thsel':''">荣耀</u-th>
									<u-th :class="cIndex==3?'thsel':''">王者</u-th> -->
								</u-tr>
								<u-tr class="">
									<u-tr style="width: 160rpx;">
										<u-td style="">广告位</u-td>
										<u-td style="">
											<u-td style="">PC端</u-td>
											<u-td style="">小程序</u-td>
											<u-td style="">移动端</u-td>
										</u-td>
									</u-tr>
									<u-tr v-for="(item2,index2) in datalist" :key="index2">
										<u-td style="width: 138rpx;height: 390rpx;">
											<u-td :class="cIndex==index2?'tdsel':''">
												<span class="tdtext2">{{item2.ad_pc}}</span>
											</u-td>
											<u-td :class="cIndex==index2?'tdsel':''">
												<span class="tdtext2">{{item2.ad_xcx}}</span>
											</u-td>
											<u-td :class="cIndex==index2?'tdsel':''">
												<span class="tdtext2">{{item2.ad_mob}}</span>
											</u-td>
										</u-td>
									</u-tr>
								</u-tr>
								<u-tr class="h52">
									<u-td>
										案源线索<br />
										<span class="font_10_999">律师法学生协作</span>
									</u-td>
									<u-td :class="cIndex==index2?'tdsel':''" v-for="(item2,index2) in datalist"
										:key="index2">
										<image v-if="item2.has_case==1" class="hyi2"
											src="../../../../static/img/mine/hyi2.png" mode=""></image>
									</u-td>
								</u-tr>
								<u-tr class="h52">
									<u-td>个性化服务</u-td>
									<u-td :class="cIndex==index2?'tdsel':''" v-for="(item2,index2) in datalist"
										:key="index2">
										<image v-if="item2.personal_serve==1" class="hyi2"
											src="../../../../static/img/mine/hyi2.png" mode=""></image>
									</u-td>
								</u-tr>
								<u-tr class="h52">
									<u-td>个人主页</u-td>
									<u-td :class="cIndex==index2?'tdsel':''" v-for="(item2,index2) in datalist"
										:key="index2">
										<image v-if="item2.person_detail==1" class="hyi2"
											src="../../../../static/img/mine/hyi2.png" mode=""></image>
									</u-td>
								</u-tr>
							</u-table>
						</scroll-view>
					</view>

				</view>

			</view>
		</view>

		<view class="zhanwei"></view>
		<view class="hy-btn-div">
			<view class="hy-btn flex flex_cen" @click="toup">
				<span class="num" v-if="price">￥{{price}} </span>
				立即开通
			</view>
			<view class="u-m-t-24 flex flex_cen">
				<view class="chbox  flex_cen flex" v-if="chboxSel" @click="chboxSel=false">
					<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
				</view>
				<view class="chbox-no" v-if="!chboxSel" @click="chboxSel=true"></view>
				<view class="u-m-l-10 font_14_999">
					开通前请确认
					<span class="yhxy" @click="tode">《会员服务协议》</span>
				</view>
			</view>
		</view>

		<couponList :couponShow="couponShow" @shiyong="shiyong" type="2"></couponList>
	</view>
</template>

<script>
	import couponList from '../../../../components/couponList/couponList.vue';
	export default {
		components: {
			couponList
		},
		data() {
			return {
				couponShow: false,
				yhq_id: '',
				aicontent: '',
				current: 0,
				hycurrent: 1,
				chboxSel: false,
				cIndex: -1,
				background: {
					backgroundColor: '#3E5797',
				},
				xsblist: null,
				datalist: [],
				zybdatalist: [],
				ailist: [],
				price: '',
				id: '',
				lsdetail: []
			}
		},
		onLoad(e) {
			this.couponShow = true
			this.current = e.type
			this.getList()
			this.getInfo()
		},
		methods: {
			selc(e, i) {

				this.$api({
					url: '/lawyer/set_price',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						level_id: e.id,
						yhq_id: this.yhq_id
					},
				}).then(res => {
					if (res.code == 1) {
						this.price = (res.data.price*1).toFixed(2)
						this.cIndex = i
						this.id = e.id
					}
				})

			},
			shiyong(e) {
				if (e) {
					this.yhq_id = e.id
				}else{
					this.yhq_id = ''
				}
				this.couponShow = false
			},
			//个人信息
			getInfo() {
				this.$api({
					url: '/lawyer/getLawyer',
					method: 'get',
					data: {
						token: uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.lsdetail = res.data
					}
				})

			},
			xsbChange(item2, index2) {
				this.cIndex = index2
				this.xsblist = item2
				this.price = item2.price
				this.id = item2.id
			},
			getList() {
				this.$api({
					url: '/lawyer_equity',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code == 1) {
						this.datalist = res.data
					}
				})

				this.$api({
					url: '/lawyer/packages',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code == 1) {
						this.zybdatalist = res.data
					}
				})

				this.$api({
					url: '/lawyer/ai_list',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code == 1) {
						this.ailist = res.data
						if (res.data.length > 0) {
							this.aicontent = res.data[0].content
						}

					}
				})
			},
			tode() {
				uni.navigateTo({
					url: "/pages/index/privacyAgreement/privacyAgreement?title=会员服务协议&id=39"
				})
			},
			jilu() {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/mine/memberBuyList"
				})
			},
			swchange(e) {
				this.current = e.target.current
				this.cIndex = -1
				this.price = ''
				this.xsblist = null
				// console.log(e.target.current)
			},
			toup() {
				if (this.current == 0) {
					if (!this.price) {
						uni.showToast({
							icon: 'none',
							title: '请选择充值套餐',
							duration: 1500
						});
						return
					}
					if (!this.chboxSel) {
						uni.showToast({
							icon: 'none',
							title: '请勾选《会员服务协议》',
							duration: 1500
						});
						return
					}
					this.$api({
						url: '/lawyer/buy_package',
						method: 'post',
						data: {
							token: uni.getStorageSync("token"),
							package_id: this.id,
							price: this.price,
							yhq_id: this.yhq_id
						},
					}).then(res => {
						if (res.code == 1) {

							uni.requestPayment({
								provider: "wxpay",
								appid: res.data.pay_info.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								timeStamp: res.data.pay_info.timeStamp, // 时间戳（单位：秒）
								paySign: res.data.pay_info.paySign, //签名
								nonceStr: res.data.pay_info.nonceStr, // 随机字符串
								package: res.data.pay_info.prepay_id, // 固定值
								signType: res.data.pay_info.signType, // 签名算法，这里用的 MD5/RSA 签名
								success(res2) {
									if (res2.errMsg == "requestPayment:ok") {
										uni.showToast({
											title: "购买成功",
											icon: "none"
										});
									}
								},
								fail(e) {
									console.log('支付失败支付失败支付失败', e)
									uni.showToast({
										title: "支付失败",
										icon: "none"
									});
								}
							})


							
						}
					})
				} else if (this.current == 3) {
					if (!this.price) {
						uni.showToast({
							icon: 'none',
							title: '请选择充值套餐',
							duration: 1500
						});
						return
					}
					if (!this.chboxSel) {
						uni.showToast({
							icon: 'none',
							title: '请勾选《会员服务协议》',
							duration: 1500
						});
						return
					}
					this.$api({
						url: '/lawyer/recharge',
						method: 'post',
						data: {
							token: uni.getStorageSync("token"),
							level_id: this.id,
							price: this.price,
							yhq_id: this.yhq_id
						},
					}).then(res => {
						if (res.code == 1) {
							uni.requestPayment({
								provider: "wxpay",
								appid: res.data.pay_info.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								timeStamp: res.data.pay_info.timeStamp, // 时间戳（单位：秒）
								paySign: res.data.pay_info.paySign, //签名
								nonceStr: res.data.pay_info.nonceStr, // 随机字符串
								package: res.data.pay_info.prepay_id, // 固定值
								signType: res.data.pay_info.signType, // 签名算法，这里用的 MD5/RSA 签名
								success(res2) {
									if (res2.errMsg == "requestPayment:ok") {
										uni.showToast({
											title: "购买成功",
											icon: "none"
										});
									}
								},
								fail(e) {
									console.log('支付失败支付失败支付失败', e)
									uni.showToast({
										title: "支付失败",
										icon: "none"
									});
								}
							})
						}
					})
				} else if (this.current == 1) {
					if (!this.price) {
						uni.showToast({
							icon: 'none',
							title: '请选择充值套餐',
							duration: 1500
						});
						return
					}
					if (!this.chboxSel) {
						uni.showToast({
							icon: 'none',
							title: '请勾选《会员服务协议》',
							duration: 1500
						});
						return
					}
					this.$api({
						url: '/lawyer/buy_ai',
						method: 'post',
						data: {
							token: uni.getStorageSync("token"),
							ai_id: this.id,
							price: this.price,
							yhq_id: this.yhq_id
						},
					}).then(res => {
						if (res.code == 1) {
							uni.requestPayment({
								provider: "wxpay",
								appid: res.data.pay_info.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								timeStamp: res.data.pay_info.timeStamp, // 时间戳（单位：秒）
								paySign: res.data.pay_info.paySign, //签名
								nonceStr: res.data.pay_info.nonceStr, // 随机字符串
								package: res.data.pay_info.prepay_id, // 固定值
								signType: res.data.pay_info.signType, // 签名算法，这里用的 MD5/RSA 签名
								success(res2) {
									if (res2.errMsg == "requestPayment:ok") {
										uni.showToast({
											title: "购买成功",
											icon: "none"
										});
									}
								},
								fail(e) {
									console.log('支付失败支付失败支付失败', e)
									uni.showToast({
										title: "支付失败",
										icon: "none"
									});
								}
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '暂不支持充值AI形象克隆套餐',
						duration: 2000
					});
				}

			},
			toJilu() {
				uni.navigateTo({
					url: "/pages/mine/memberBuyList"
				})
			},
			toyouhui(e) {
				if (e == 1) {
					uni.navigateTo({
						url: "/pages/mine/jifenShop?type=2"
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: "/pages/mine/youhuiquanCenter"
					})
				} else if (e == 3) {
					// uni.navigateTo({
					// 	url: "/pages/mine/youhuiquanCenter"
					// })
				} else if (e == 4) {
					uni.navigateTo({
						url: "/pages/mine/singin?type=2"
					})
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.song-text {
		width: 40rpx;
		height: 40rpx;
		background: linear-gradient(138deg, #F9471C 0%, #FDAD37 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: bold;
		line-height: 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.sa3-col {
		font-weight: bold;
		font-size: 24rpx;
		color: #F65D26;
	}

	.cz4-div {
		width: 686rpx;
		margin: 32rpx;
		padding: 24rpx;
		background: #FFFBF6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FCF4E9;


		&1 {
			background: #FBFBFF;
			border: 2rpx solid #F6F6FB;
		}

		&2 {
			background: #F9FDFD;
			border: 2rpx solid #DFEFF2;
		}

		&3 {
			background: #FBFBFF;
			border: 2rpx solid #F6F6FB;
		}

		.cz4-item {
			text-align: center;

			.cz4-img {
				width: 92rpx;
				height: 92rpx;
				margin: 0 auto;
			}
		}

		&-text {
			font-size: 24rpx;
			color: #333333;
			line-height: 48rpx;
		}
	}

	.l-sx {
		width: 8rpx;
		height: 24rpx;

		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;

		&1 {
			background: #3F51B1;
		}

		&2 {
			background: #257487;
		}

		&3 {
			background: #8264BE;
		}

		&4 {
			background: #C39653;
		}
	}

	.m-div {
		padding: 32rpx;

		.m-item {
			width: 192rpx;
			height: 240rpx;
			background: #FFFFFF;
			border-radius: 32rpx 12rpx 32rpx 12rpx;
			border: 2rpx solid #EBEAEA;
			text-align: center;
			padding-top: 32rpx;
			position: relative;
			margin-right: 24rpx;

			.gouxuan {
				width: 39rpx;
				height: 39rpx;
				border-radius: 12rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				z-index: 2;


			}

			&-sel {

				color: #713005;

				&1 {
					border: 2rpx solid #3F51B1;
					background: #F9FAFD;

					.gouxuan {
						background-color: #3F51B1;
					}
				}

				&2 {
					border: 2rpx solid #6DA5B1;
					background: #F9FDFD;

					.gouxuan {
						background-color: #6DA5B1;
					}
				}

				&3 {
					border: 2rpx solid #8979A9;
					background: #FCFAFF;

					.gouxuan {
						background-color: #8979A9;
					}
				}

				&4 {
					border: 2rpx solid #FCB878;
					background: #FFF9F4;

					.gouxuan {
						background-color: #FCB878;
					}

				}


				.m-title {
					color: #713005 !important;
				}

				.m-hx {
					color: #713005 !important;
				}
			}

			.m-title {
				font-size: 28rpx;
				color: #2F364B;
				width: 192rpx;
			}

			.m-fh {
				font-weight: bold;
				font-size: 24rpx;
				color: #FC3A30;
			}

			.m-num {
				font-weight: bold;
				font-size: 40rpx;
				color: #FC3A30;
			}

			.m-hx {
				font-size: 20rpx;
				color: #2F364B;
				text-decoration-line: line-through;
			}


		}
	}

	.zhanwei {
		width: 750rpx;
		height: 182rpx;
	}

	.hy-btn-div {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 188rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		padding: 24rpx 32rpx;

		.hy-btn {
			width: 686rpx;
			height: 92rpx;
			background: linear-gradient(177deg, #FFF7EA 0%, #ECA561 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #773E00;
			text-align: center;
			line-height: 92rpx;
		}

		.chbox {
			width: 32rpx;
			height: 32rpx;
			background: #F81B1B;
			border-radius: 50%;
			text-align: center;
			// line-height: 24rpx;
		}

		.chbox-no {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			border: 1px #999 solid;
		}

		.yhxy {
			color: #F92323;

		}

		.num {
			font-weight: bold;
			font-size: 40rpx;
			color: #713005;
			margin-right: 16rpx;
		}
	}


	.hyqx {
		padding: 32rpx;
		background-color: #FFFFFF;

		.hyi1 {
			width: 48rpx;
			height: 48rpx;
		}

		.u-th {
			font-size: 24rpx;
		}

		.u-td {
			font-size: 24rpx !important;
		}

		.thsel {
			background: linear-gradient(90deg, #FFEEC0 0%, #FCD885 100%);
		}

		.tdsel {
			background: #FEF9F1;
		}

		.h52 {
			height: 52rpx;
		}

		.h78 {
			height: 78rpx;
		}

		.w176 {
			width: 176rpx;
		}

		.tdtext {
			font-size: 20rpx;
			color: #FE8B24;
		}

		.tdtext2 {
			font-size: 24rpx;
			color: #FE8B24;
		}

		.hyi2 {
			width: 32rpx;
			height: 28rpx;
			margin: 0 auto;
		}
	}


	.uni-margin-wrap {
		width: 750rpx;
		height: 188rpx;
	}

	.bg1 {
		background-color: #3E5797;
	}

	.bg2 {
		background-color: #1995A7;
	}

	.bg3 {
		background-color: #6351B4;
	}

	.bg4 {
		background-color: #383838;
	}

	.swiper {
		height: 240rpx;
		width: 600rpx;

		/deep/ .uni-swiper-dot {
			width: 28rpx;
			height: 4rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}

	.swiper-item {
		position: relative;
		width: 600rpx;
		height: 188rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		&1 {
			background: linear-gradient(180deg, #E8ECFA 0%, #EAEFFC 100%, rgba(216, 196, 166, 0) 100%);
		}

		&2 {
			background: linear-gradient(180deg, #DBF0F0 0%, #EAF6F7 100%, rgba(216, 196, 166, 0) 100%);
		}

		&3 {
			background: linear-gradient(180deg, #E1DBFB 0%, #D4CFFA 100%, rgba(216, 196, 166, 0) 100%);
		}

		&4 {
			background: linear-gradient(180deg, #FFE7D0 0%, #FAF8F4 100%, rgba(216, 196, 166, 0) 100%);
		}


		.hy-div {
			width: 600rpx;
			height: 188rpx;
			padding: 34rpx;
			position: relative;


			.cz-t {
				font-weight: bold;
				font-size: 32rpx;


				&1 {
					color: #253987;
				}

				&2 {
					color: #257487;
				}

				&3 {
					color: #322269;
				}

				&4 {
					color: #333;
				}

			}

			.cz-jj {
				font-size: 20rpx;

				&1 {
					color: #2B3E8A;
				}

				&2 {
					color: #257487;
				}

				&3 {
					color: #322268;
				}

				&4 {
					color: #333;
				}
			}

			.cz-num {
				font-weight: bold;
				font-size: 32rpx;

				&_-1 {
					font-size: 24rpx;
				}

				&1 {
					color: #2B3E8A;
				}

				&2 {
					color: #257487;
				}

				&3 {
					color: #322268;
				}

			}

			.cz-img {
				width: 250rpx;
				height: 188rpx;
				position: absolute;
				right: 110rpx;
				top: 0;
			}

			.cz-btn {
				position: absolute;
				right: 12rpx;
				bottom: 12rpx;
				width: 112rpx;
				height: 40rpx;

				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 18rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;

				&1 {
					background: linear-gradient(138deg, #9EB1F1 0%, #3B5BD6 100%);
				}

				&2 {
					background: linear-gradient(138deg, #7ED4DB 0%, #008BAC 100%);
				}

				&3 {
					background: linear-gradient(138deg, #7B73CE 0%, #4F409E 100%);
				}

				&4 {
					background: linear-gradient(138deg, #FCB878 0%, #F06600 100%);
				}
			}
		}
	}
</style>